import React from 'react';
import { Input, Select, Button, Row, Col } from 'antd';
import { SearchOutlined, GlobalOutlined, HomeOutlined } from '@ant-design/icons';

const { Search } = Input;
const { Option } = Select;

const SearchFilter = ({
  searchKeyword,
  statusFilter,
  networkTypeFilter, 
  isLoading,
  onSearch,
  onSearchChange,
  onStatusFilterChange,
  onNetworkTypeFilterChange 
}) => {
  const handleSearch = () => {
    onSearch(searchKeyword, statusFilter, networkTypeFilter);
  };

  const handleKeywordChange = (e) => {
    onSearchChange(e.target.value);
  };

  const handleStatusChange = (value) => {
    onStatusFilterChange(value);
  };

  const handleNetworkTypeChange = (value) => {
    onNetworkTypeFilterChange(value);
  };

  return (
    <Row gutter={16}>
      <Col xs={24} sm={24} md={12} lg={14}>
        <Search
          placeholder="输入关键词搜索局域网..."
          value={searchKeyword}
          onChange={handleKeywordChange}
          onSearch={handleSearch}
          enterButton={
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
            </Button>
          }
          loading={isLoading}
          size="large"
        />
      </Col>
      <Col xs={12} sm={12} md={6} lg={5}>
        <Select
          placeholder="网络类型"
          value={networkTypeFilter}
          onChange={handleNetworkTypeChange}
          style={{ width: '100%' }}
          size="large"
          suffixIcon={<GlobalOutlined />}
        >
          <Option value="all">
            <span>
              <GlobalOutlined style={{ marginRight: 6 }} />
              全部类型
            </span>
          </Option>
          <Option value="public">
            <span>
              <GlobalOutlined style={{ marginRight: 6, color: '#52c41a' }} />
              公网
            </span>
          </Option>
          <Option value="private">
            <span>
              <HomeOutlined style={{ marginRight: 6, color: '#faad14' }} />
              内网
            </span>
          </Option>
        </Select>
      </Col>
      <Col xs={12} sm={12} md={6} lg={5}>
        <Select
          placeholder="状态筛选"
          value={statusFilter}
          onChange={handleStatusChange}
          style={{ width: '100%' }}
          size="large"
        >
          <Option value="all">全部状态</Option>
          <Option value="active">活跃</Option>
          <Option value="inactive">不活跃</Option>
          <Option value="pending">等待中</Option>
        </Select>
      </Col>
    </Row>
  );
};

export default SearchFilter;